<template>
  <div class="student-analysis-container">
    <!-- 顶部信息 -->
    <div class="header">
      <div class="back-btn" @click="goBack">
        <span class="icon">←</span> 返回班级
      </div>
      <div class="student-info">
        <div class="avatar">👤</div>
        <div class="info">
          <h1>{{ studentInfo.name }}</h1>
          <p>{{ studentInfo.college }} | {{ studentInfo.grade }} | {{ studentInfo.class }}</p>
        </div>
      </div>
      <el-button type="primary" @click="goToStudyPlan">
        <el-icon><Calendar /></el-icon>
        查看学习计划
      </el-button>
    </div>

    <!-- 学习状态卡片 -->
    <div class="status-cards">
      <div v-for="status in statusItems" :key="status.id" class="status-card">
        <div class="status-icon" :style="{ background: status.color }">{{ status.icon }}</div>
        <div class="status-info">
          <h3>{{ status.title }}</h3>
          <div class="status-value">{{ status.value }}</div>
          <div class="status-trend" :class="status.trend">
            {{ status.trend === 'up' ? '↑' : '↓' }} {{ status.change }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <!-- 成绩分布 -->
      <div class="chart-card">
        <h3>成绩分布</h3>
        <v-chart class="chart" :option="gradeDistOption" />
      </div>

      <!-- 学习进度 -->
      <div class="chart-card">
        <h3>学习进度追踪</h3>
        <v-chart class="chart" :option="progressOption" />
      </div>

      <!-- 知识点掌握 -->
      <div class="chart-card">
        <h3>知识点掌握情况</h3>
        <v-chart class="chart" :option="knowledgeOption" />
      </div>

      <!-- 学习行为分析 -->
      <div class="chart-card">
        <h3>学习行为分析</h3>
        <v-chart class="chart" :option="behaviorOption" />
      </div>
    </div>

    <!-- 课程成绩列表 -->
    <div class="courses-section">
      <h2>课程成绩详情</h2>
      <div class="course-list">
        <div v-for="course in courses" :key="course.id" class="course-card">
          <div class="course-info">
            <h3>{{ course.name }}</h3>
            <p>{{ course.teacher }}</p>
          </div>
          <div class="course-stats">
            <div class="stat">
              <span class="label">成绩</span>
              <span class="value" :class="getScoreClass(course.score)">{{ course.score }}</span>
            </div>
            <div class="stat">
              <span class="label">排名</span>
              <span class="value">#{{ course.rank }}</span>
            </div>
            <div class="stat">
              <span class="label">出勤率</span>
              <span class="value">{{ course.attendance }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习计划模块 -->
    <div class="study-plan-section">
      <div class="section-header">
        <h2>AI 学习计划</h2>
        <el-button type="primary" size="small" @click="refreshPlan">
          <el-icon><Refresh /></el-icon>
          重新生成计划
        </el-button>
      </div>

      <!-- 学习计划内容 -->
      <div class="plan-content">
        <!-- 每周计划 -->
        <div class="weekly-plan">
          <h3>本周学习重点</h3>
          <div class="plan-cards">
            <div v-for="(plan, index) in weeklyPlans" :key="index" class="plan-card">
              <div class="plan-day">{{ plan.day }}</div>
              <div class="plan-details">
                <div v-for="(item, idx) in plan.items" :key="idx" class="plan-item">
                  <span class="time">{{ item.time }}</span>
                  <span class="task">{{ item.task }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习建议 -->
        <div class="study-suggestions">
          <h3>针对性建议</h3>
          <div class="suggestion-cards">
            <div v-for="(suggestion, index) in suggestions" :key="index" class="suggestion-card">
              <div class="suggestion-icon">{{ suggestion.icon }}</div>
              <div class="suggestion-content">
                <h4>{{ suggestion.title }}</h4>
                <p>{{ suggestion.content }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, LineChart, RadarChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { ElMessage } from 'element-plus'
import { Refresh, Calendar } from '@element-plus/icons-vue'
import { classAPI } from '@/api/admin/college'

// 注册必需的 ECharts 组件
use([
  CanvasRenderer,
  PieChart,
  LineChart,
  RadarChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

const route = useRoute()
const router = useRouter()

const goBack = () => {
  const { collegeId, gradeId, classId } = route.params
  router.push(`/admin/class/${collegeId}/${gradeId}/${classId}`)
}

const goToStudyPlan = () => {
  const { collegeId, gradeId, classId, studentId } = route.params
  router.push(`/admin/student/${collegeId}/${gradeId}/${classId}/${studentId}/study-plan`)
}

// 学生基本信息
const studentInfo = ref({
  name: '加载中...',
  college: '加载中...',
  grade: '加载中...',
  class: '加载中...'
})

// 课程成绩数据
const courses = ref([])

// 学习行为数据
const learningBehavior = ref({
  activeParticipation: 0,
  focusTime: 0,
  questionFrequency: 0,
  groupWorkContribution: 0
})

// 学习风格数据
const learningStyle = ref({
  visual: 0,
  auditory: 0,
  kinesthetic: 0,
  reading: 0
})

// 加载状态
const loading = ref(false)
const error = ref(null)

// 状态卡片数据
const statusItems = ref([
  {
    id: 1,
    title: '综合成绩',
    value: '85.6',
    change: 5,
    trend: 'up',
    icon: '📊',
    color: '#1890ff'
  },
  {
    id: 2,
    title: '班级排名',
    value: '#8',
    change: 2,
    trend: 'up',
    icon: '🏆',
    color: '#52c41a'
  },
  {
    id: 3,
    title: '出勤率',
    value: '95%',
    change: 1,
    trend: 'down',
    icon: '📅',
    color: '#722ed1'
  },
  {
    id: 4,
    title: '课程数量',
    value: 0,
    change: 0,
    trend: 'up',
    icon: '📝',
    color: '#faad14'
  }
])

// 成绩分布图表配置
const gradeDistOption = ref({
  title: { 
    text: '成绩分布',
    left: 'center'
  },
  tooltip: { 
    trigger: 'item',
    formatter: '{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['优秀(90-100)', '良好(80-89)', '中等(70-79)', '及格(60-69)', '不及格(<60)']
  },
  series: [{
    name: '成绩分布',
    type: 'pie',
    radius: '70%',
    center: ['50%', '50%'],
    data: [
      { value: 3, name: '优秀(90-100)', itemStyle: { color: '#52c41a' } },
      { value: 4, name: '良好(80-89)', itemStyle: { color: '#1890ff' } },
      { value: 2, name: '中等(70-79)', itemStyle: { color: '#faad14' } },
      { value: 1, name: '及格(60-69)', itemStyle: { color: '#722ed1' } },
      { value: 0, name: '不及格(<60)', itemStyle: { color: '#f5222d' } }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    },
    label: {
      formatter: '{b}: {c} ({d}%)'
    }
  }]
})

// 学习进度图表配置
const progressOption = ref({
  title: { text: '学习进度追踪' },
  tooltip: { 
    trigger: 'axis',
    formatter: '{b}: {c}%'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['高等数学', '计算机基础', 'C语言程序设计', '数据结构', '离散数学', '计算机网络'],
    axisLabel: {
      rotate: 30,
      interval: 0
    }
  },
  yAxis: {
    type: 'value',
    max: 100,
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [{
    data: [85, 92, 88, 95, 89, 93],
    type: 'bar', // 改为柱状图，更清晰地展示每个科目进度
    barWidth: '40%',
    itemStyle: {
      color: function(params) {
        // 颜色渐变，进度高的显示更亮的颜色
        const colorList = [
          '#91cc75', '#5470c6', '#ee6666', '#73c0de', '#3ba272', '#fc8452'
        ];
        return colorList[params.dataIndex % colorList.length];
      },
      borderRadius: [5, 5, 0, 0]
    },
    label: {
      show: true,
      position: 'top',
      formatter: '{c}%'
    }
  }]
})

// 知识点掌握图表配置
const knowledgeOption = ref({
  title: { text: '知识点掌握情况' },
  tooltip: { trigger: 'item' },
  radar: {
    // 雷达图的指示器，用来指定雷达图中的多个变量
    indicator: [
      { name: '数据结构', max: 100 },
      { name: '算法分析', max: 100 },
      { name: '计算机网络', max: 100 },
      { name: '操作系统', max: 100 },
      { name: '数据库', max: 100 },
      { name: '软件工程', max: 100 },
      { name: 'Web开发', max: 100 }
    ],
    radius: '65%',
    splitNumber: 5,  // 雷达轴的分割段数
    axisName: {
      color: '#333',
      fontSize: 12
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(255, 255, 255, 0.5)']
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0.1)'
      }
    }
  },
  series: [{
    type: 'radar',
    data: [{
      value: [85, 78, 90, 83, 88, 80, 75],
      name: '知识掌握度',
      areaStyle: {
        color: 'rgba(24,144,255,0.3)'
      },
      lineStyle: {
        color: '#1890ff',
        width: 2
      },
      itemStyle: {
        color: '#1890ff'
      }
    }]
  }]
})

// 学习行为分析图表配置
const behaviorOption = ref({
  title: { text: '学习行为分析' },
  tooltip: { 
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: { 
    data: ['课堂参与', '作业完成', '自主学习'],
    right: 10
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value',
    max: 100,
    axisLabel: {
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: '课堂参与',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [95, 88, 92, 85, 90],
      itemStyle: { color: '#1890ff' }
    },
    {
      name: '作业完成',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [90, 95, 88, 92, 85],
      itemStyle: { color: '#52c41a' }
    },
    {
      name: '自主学习',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [85, 90, 85, 88, 92],
      itemStyle: { color: '#722ed1' }
    }
  ]
})

// 模拟每周计划数据
const weeklyPlans = ref([
  {
    day: '周一',
    items: [
      { time: '08:00-10:00', task: '高等数学重点章节复习' },
      { time: '14:00-16:00', task: '数据结构编程练习' },
      { time: '19:00-21:00', task: '计算机网络知识点巩固' }
    ]
  },
  {
    day: '周二',
    items: [
      { time: '09:00-11:00', task: '线性代数习题训练' },
      { time: '14:30-16:30', task: '操作系统实验' },
      { time: '19:00-21:00', task: '英语听力训练' }
    ]
  },
  {
    day: '周三',
    items: [
      { time: '08:00-10:00', task: '概率论重点复习' },
      { time: '14:00-16:00', task: '算法设计与分析' },
      { time: '19:00-21:00', task: 'C++项目实践' }
    ]
  },
  {
    day: '周四',
    items: [
      { time: '09:00-11:00', task: '数据库原理复习' },
      { time: '14:30-16:30', task: 'Java程序设计' },
      { time: '19:00-21:00', task: '专业英语学习' }
    ]
  },
  {
    day: '周五',
    items: [
      { time: '08:00-10:00', task: '计算机组成原理' },
      { time: '14:00-16:00', task: '软件工程实践' },
      { time: '19:00-21:00', task: '知识点总结' }
    ]
  }
])

// 学习建议数据
const suggestions = ref([
  {
    icon: '📚',
    title: '知识点巩固',
    content: '建议加强数据结构中树和图的练习，这是你的薄弱环节。'
  },
  {
    icon: '⏰',
    title: '时间管理',
    content: '建议在每天晚上复习当天的重点内容，提高知识吸收效率。'
  },
  {
    icon: '🎯',
    title: '学习方法',
    content: '可以尝试番茄工作法，每25分钟专注学习，然后休息5分钟。'
  },
  {
    icon: '💪',
    title: '能力提升',
    content: '多参与实践项目，将理论知识应用到实际编程中。'
  }
])

/**
 * 获取学生学习情况数据
 */
const fetchStudentLearning = async () => {
  const { collegeId, gradeId, classId, studentId } = route.params
  
  loading.value = true
  error.value = null
  
  try {
    console.log(`正在获取学生详情: studentId=${studentId}`)
    
    // 使用API接口获取学生详情
    const res = await classAPI.getStudentDetail(studentId)
    console.log('学生详情响应:', res)
    
    if (res) {
      updateUIWithStudentData(res)
    }
  } catch (err) {
    console.error('获取学生详情失败:', err)
    error.value = '获取学生详情失败，请稍后重试'
    ElMessage.error('获取学生详情失败')
    
    // 使用模拟数据
    if (import.meta.env.DEV) {
      generateMockData()
    }
  } finally {
    loading.value = false
  }
      }
      
/**
 * 使用学生数据更新UI
 */
const updateUIWithStudentData = (data) => {
  // 更新学生基本信息
  studentInfo.value = {
    name: data.name || '未知学生',
    id: data.id,
    email: data.email,
    enrollment_date: data.enrollment_date,
    college: '计算机科学与技术学院', // 静态数据
    grade: '2023级', // 静态数据
    class: data.className || `计算机科学1班`,
    score: data.score,
    attendance: data.attendance,
    rank: data.rank
      }
      
      // 更新状态卡片
      statusItems.value = [
        {
          id: 1,
          title: '综合成绩',
      value: data.score.toFixed(1),
      change: parseFloat((data.scoreChange || '+5%').replace('%', '')),
          trend: 'up',
          icon: '📊',
          color: '#1890ff'
        },
        {
          id: 2,
          title: '班级排名',
      value: `#${data.rank}`,
      change: parseFloat((data.rankChange || '+2%').replace('%', '')),
          trend: 'up',
          icon: '🏆',
          color: '#52c41a'
        },
        {
          id: 3,
          title: '出勤率',
      value: `${data.attendance.toFixed(2)}%`,
      change: parseFloat((data.attendanceChange || '+1%').replace('%', '')),
      trend: data.attendanceChange && data.attendanceChange.startsWith('-') ? 'down' : 'up',
          icon: '📅',
          color: '#722ed1'
        },
        {
          id: 4,
          title: '课程数量',
      value: data.courseCount || 6,
      change: parseFloat((data.courseCountChange || '+0%').replace('%', '')),
          trend: 'up',
          icon: '📝',
          color: '#faad14'
        }
      ]
      
  // 使用学习进度数据
  if (data.learning_progress) {
    progressOption.value.xAxis.data = data.learning_progress.map(item => item.subject)
    progressOption.value.series[0].data = data.learning_progress.map(item => item.completion)
  }
  
  // 使用知识点掌握数据
  if (data.knowledge_mastery) {
    knowledgeOption.value.radar.indicator = data.knowledge_mastery.map(item => ({
      name: item.area,
      max: 100
    }))
    knowledgeOption.value.series[0].data[0].value = data.knowledge_mastery.map(item => item.level)
  }
  
  // 使用学习行为分析数据
  if (data.learning_behavior) {
    behaviorOption.value.xAxis.data = data.learning_behavior.map(item => item.week)
    behaviorOption.value.series[0].data = data.learning_behavior.map(item => item.class_participation)
    behaviorOption.value.series[1].data = data.learning_behavior.map(item => item.assignment_completion)
    behaviorOption.value.series[2].data = data.learning_behavior.map(item => item.self_study)
  }
  
  // 更新课程列表数据
  courses.value = []
  const courseNames = ['高等数学', '大学英语', '计算机基础', '数据结构', 'C语言程序设计', '数据库原理']
  const teachers = ['王老师', '李老师', '张老师', '刘老师', '陈老师', '赵老师']
  
  // 如果有课程成绩数据，使用实际数据
  if (Array.isArray(data.courses)) {
    courses.value = data.courses.map((course, index) => ({
      id: course.id || index + 1,
        name: course.name,
        score: course.score.toFixed(1),
      rank: course.rank || Math.floor(Math.random() * 30) + 1,
      attendance: course.attendance_rate?.toFixed(0) || '85',
      teacher: course.teacher_name || teachers[index % teachers.length]
    }))
  } else {
    // 否则使用模拟数据
    courses.value = courseNames.map((name, index) => ({
      id: index + 1,
      name: name,
      score: (Math.random() * 20 + 75).toFixed(1),
      rank: Math.floor(Math.random() * 30) + 1,
      attendance: (Math.random() * 15 + 85).toFixed(0),
      teacher: teachers[index % teachers.length]
    }))
  }
  
  // 使用成绩分布数据
  if (data.grade_distribution) {
    gradeDistOption.value.series[0].data = [
      { 
        value: data.grade_distribution.excellent, 
        name: '优秀(90-100)', 
        itemStyle: { color: '#52c41a' } 
      },
      { 
        value: data.grade_distribution.good, 
        name: '良好(80-89)', 
        itemStyle: { color: '#1890ff' } 
      },
      { 
        value: data.grade_distribution.average, 
        name: '中等(70-79)', 
        itemStyle: { color: '#faad14' } 
      },
      { 
        value: data.grade_distribution.poor, 
        name: '及格(60-69)', 
        itemStyle: { color: '#722ed1' } 
      }
    ]
  } else {
    // 如果没有成绩分布数据，使用默认数据
    gradeDistOption.value.series[0].data = [
      { value: 3, name: '优秀(90-100)', itemStyle: { color: '#52c41a' } },
      { value: 4, name: '良好(80-89)', itemStyle: { color: '#1890ff' } },
      { value: 2, name: '中等(70-79)', itemStyle: { color: '#faad14' } },
      { value: 1, name: '及格(60-69)', itemStyle: { color: '#722ed1' } },
      { value: 0, name: '不及格(<60)', itemStyle: { color: '#f5222d' } }
    ]
  }
}

/**
 * 更新图表数据
 */
const updateCharts = () => {
  // 更新成绩分布图表
  updateGradeDistribution()
  
  // 更新学习进度图表
  updateProgressChart()
  
  // 更新知识点掌握图表
  updateKnowledgeChart()
  
  // 更新学习行为图表
  updateBehaviorChart()
}

/**
 * 更新成绩分布图表
 */
const updateGradeDistribution = () => {
  // 统计各分数段课程数量
  const scoreRanges = {
    '优秀(90-100)': 0,
    '良好(80-89)': 0,
    '中等(70-79)': 0,
    '及格(60-69)': 0,
    '不及格(<60)': 0
  }
  
  courses.value.forEach(course => {
    const score = parseFloat(course.score)
    if (score >= 90) {
      scoreRanges['优秀(90-100)']++
    } else if (score >= 80) {
      scoreRanges['良好(80-89)']++
    } else if (score >= 70) {
      scoreRanges['中等(70-79)']++
    } else if (score >= 60) {
      scoreRanges['及格(60-69)']++
    } else {
      scoreRanges['不及格(<60)']++
    }
  })
  
  // 更新图表数据
  gradeDistOption.value.series[0].data = [
    { value: scoreRanges['优秀(90-100)'], name: '优秀(90-100)', itemStyle: { color: '#52c41a' } },
    { value: scoreRanges['良好(80-89)'], name: '良好(80-89)', itemStyle: { color: '#1890ff' } },
    { value: scoreRanges['中等(70-79)'], name: '中等(70-79)', itemStyle: { color: '#faad14' } },
    { value: scoreRanges['及格(60-69)'], name: '及格(60-69)', itemStyle: { color: '#722ed1' } },
    { value: scoreRanges['不及格(<60)'], name: '不及格(<60)', itemStyle: { color: '#f5222d' } }
  ]
}

/**
 * 更新学习进度图表
 */
const updateProgressChart = () => {
  // 获取课程名称和进度
  const courseNames = courses.value.map(course => course.name)
  const progress = courses.value.map(course => parseFloat(course.attendance))
  
  // 更新图表数据
  progressOption.value.xAxis.data = courseNames
  progressOption.value.series[0].data = progress
}

/**
 * 更新知识点掌握图表
 */
const updateKnowledgeChart = () => {
  // 生成模拟的知识点掌握数据
  const courseNames = courses.value.map(course => course.name)
  const knowledgeScores = courseNames.map(() => {
    return Math.floor(Math.random() * 30) + 70 // 模拟数据
  })
  
  // 更新图表数据
  knowledgeOption.value.xAxis.data = courseNames
  knowledgeOption.value.series[0].data = knowledgeScores
}

/**
 * 更新学习行为图表
 */
const updateBehaviorChart = () => {
  // 更新雷达图数据
  behaviorOption.value.radar.indicator = [
    { name: '课堂参与度', max: 100 },
    { name: '专注时间', max: 100 },
    { name: '提问频率', max: 10 },
    { name: '团队协作', max: 100 }
  ]
  
  behaviorOption.value.series[0].data = [
    {
      value: [
        learningBehavior.value.activeParticipation,
        learningBehavior.value.focusTime,
        learningBehavior.value.questionFrequency,
        learningBehavior.value.groupWorkContribution
      ],
      name: '学习行为'
    }
  ]
}

/**
 * 生成模拟数据（仅在开发环境使用）
 */
const generateMockData = () => {
  const { studentId } = route.params
  studentInfo.value = {
    name: `学生${studentId}`,
    id: studentId,
    gender: Math.random() > 0.5 ? '男' : '女',
    college: '计算机科学与技术学院',
    grade: '2023级',
    class: '计算机科学1班',
    score: 85.6,
    attendance: 95,
    rank: 8
  }
  
  // 模拟课程数据
  const courseNames = ['高等数学', '大学英语', '计算机基础', '数据结构', 'C语言程序设计', '数据库原理']
  courses.value = courseNames.map((name, index) => ({
    id: index + 1,
    name,
    score: (Math.random() * 30 + 65).toFixed(1),
    rank: Math.floor(Math.random() * 30) + 1,
    attendance: (Math.random() * 20 + 80).toFixed(0),
    teacher: `${['王', '李', '张', '刘', '陈'][index % 5]}老师`
  }))
  
  // 模拟学习行为数据
  learningBehavior.value = {
    activeParticipation: Math.floor(Math.random() * 30 + 65),
    focusTime: Math.floor(Math.random() * 30 + 65),
    questionFrequency: Math.floor(Math.random() * 9 + 1),
    groupWorkContribution: Math.floor(Math.random() * 30 + 65)
  }
  
  // 模拟学习风格数据
  learningStyle.value = {
    visual: Math.floor(Math.random() * 40 + 50),
    auditory: Math.floor(Math.random() * 40 + 50),
    kinesthetic: Math.floor(Math.random() * 40 + 50),
    reading: Math.floor(Math.random() * 40 + 50)
  }
  
  // 更新图表
  updateCharts()
}

/**
 * 刷新学习计划
 */
const refreshPlan = () => {
  ElMessage.success('已重新生成学习计划')
}

/**
 * 根据分数获取对应的CSS类
 * @param {string|number} score - 分数
 * @returns {string} CSS类名
 */
const getScoreClass = (score) => {
  const num = parseFloat(score)
  if (num >= 90) return 'excellent'
  if (num >= 80) return 'good'
  if (num >= 70) return 'average'
  if (num >= 60) return 'pass'
  return 'fail'
}

// 页面加载时获取数据
onMounted(() => {
  fetchStudentLearning()
})
</script>

<style scoped>
.student-analysis-container {
  min-height: 100vh;
  background: #f0f2f5;
  padding: 30px;
}

.header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
}

.back-btn {
  padding: 10px 20px;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.student-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.avatar {
  font-size: 48px;
  background: white;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.status-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.charts-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: 360px;
}

.chart {
  height: 300px;
  width: 100%;
}

.courses-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.course-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.course-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

/* 成绩颜色样式 */
.excellent { color: #52c41a; }
.good { color: #1890ff; }
.average { color: #faad14; }
.pass { color: #722ed1; }
.fail { color: #f5222d; }

/* 趋势样式 */
.trend.up { color: #52c41a; }
.trend.down { color: #f5222d; }

.study-plan-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.weekly-plan {
  margin-bottom: 32px;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.plan-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.plan-day {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
  margin-bottom: 12px;
}

.plan-item {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}

.plan-item .time {
  color: #666;
  width: 120px;
  flex-shrink: 0;
}

.plan-item .task {
  color: #333;
}

.suggestion-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.suggestion-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.suggestion-icon {
  font-size: 24px;
}

.suggestion-content h4 {
  margin-bottom: 8px;
  color: #333;
}

.suggestion-content p {
  color: #666;
  line-height: 1.5;
}

h3 {
  color: #333;
  margin-bottom: 16px;
}
</style> 